<template>
	<view class="wrapper">
		<view class="acivityBg">
			<view class="title">{{activityInfo.activityName}}</view>
			<view class="content">
				<view class="content_title">活动内容</view>
				<view class="content_info">{{activityInfo.activityContent}}</view>

			</view>
			<view class="couponBg" v-if="activityGoodsList.length > 0">
				<!-- 单张优惠券 -->
				<view v-if="activityGoodsList.length == 1">
					<view class="couponItem" :class="{unUseCoupon:item.receiveStatus == 2}"
						v-for="(item, index) in activityGoodsList" :key="item.couponId">
						<view class="left">
							<!-- 折扣 -->
							<view v-if="item.couponCategoryStatus == 2" class="amount">{{item.preferentialMoney}}</view>
							<!-- 满减|立减 -->
							<view v-else class="amount1">{{item.preferentialMoney}}</view>
							<view v-if="item.couponCategoryStatus != 2" class="desc">{{item.couponInfo}}</view>
						</view>
						<view class="center">
							<view>{{item.couponName}}</view>
							<view>{{item.bizType}}</view>
						</view>
						<view class="right">
							<view class="btn" :class="{active:item.receiveStatus == 2}" @click="getCoupon(item)">
								立即领取
							</view>
						</view>
					</view>
				</view>

				<!-- 多张优惠券 -->
				<view class="listBg" v-else>
					<view class="couponItem1" :class="{unUseCoupon1:item.receiveStatus == 2}"
						v-for="(item,index) in activityGoodsList" :key="couponId">
						<view class="left">
							<!-- 折扣 -->
							<view v-if="item.couponCategoryStatus == 2" class="amount">{{item.preferentialMoney}}</view>
							<!-- 满减|立减 -->
							<view v-else class="amount1">{{item.preferentialMoney}}</view>
							<view v-if="item.couponCategoryStatus != 2" class="desc">{{item.couponInfo}}</view>
						</view>
						<view class="right">
							<view>{{item.couponCategory}}劵</view>
							<view>{{item.bizType}}</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 一键领取 -->
			<view class="oneClickRecive" :class="{active : allReceiveStatus == 2}" v-if="activityGoodsList.length>1"
				@click="getCoupon">
				一键领取
			</view>


			<!-- 门店 -->
			<view class="store-content">
				<view class="info">
					<text class="time">活动时间:{{activityInfo.startTime}}至{{activityInfo.endTime}}</text>
					<view class="storeInfo">
						<text class="storeTitle">活动门店:</text>
						<view class="storeBox">
							<text v-for="(item, index) in activtiyStoreList" :key="index">{{item}}</text>
						</view>
					</view>
				</view>
			</view>

			<view style="height: 20rpx;"></view>
		</view>
	</view>
</template>

<script>
	import {
		apiActivityInfo,
		receiveActivityCoupons,
		insertActivityBrowseRecords
	} from '@/api/activity-api.js';

	export default {
		data() {
			return {
				activityId: '',
				activityInfo: {},
				activityGoodsList: [],
				activtiyStoreList: [],
				allReceiveStatus: 1, //全部优惠券是否可领取(用于控制一键领取按钮是否置灰状态) 1.可领取 2,置灰
				startTime: 0,
				endTime: 0,
			}
		},
		computed: {
			memberNo() {
				return this.$store.state.user.userInfo.memberNo
			},
			duration() {
				return this.endTime - this.startTime;
			}
		},
		beforeDestroy() {
			this.insertActivityBrowseRecords()
		},
		onLoad(op) {
			wx.showShareMenu({
				withShareTicket:true,
			  menus: ['shareAppMessage']
			})
			//记录进去页面的时间
			this.startTime = new Date().getTime();
			//管理端海报活动分享进来
			if (op && op.scene) {
				let scene = op && op.scene.split('_');
				let activityId = scene[0]; //activityId
				this.activityId = activityId;
			} else {
				this.activityId = op.activityId;
			}
			this.getActivityInfo();
		},
		methods: {
			insertActivityBrowseRecords() {
				//记录离开页面的时间
				this.endTime = new Date().getTime();
				insertActivityBrowseRecords({
					bizNo: this.activityId,
					memberNo: this.memberNo,
					browseDuration: this.duration,
					tenantId: this.$store.state.user.tenantId,
					activityType: 5
				}).then(res => {})
			},
			//获取活动详情
			getActivityInfo() {
				apiActivityInfo({
					tenantId: this.$store.state.user.tenantId,
					activityId: this.activityId,
					memberNo: this.$store.state.user.userInfo.memberNo
				}).then(res => {
					this.activityInfo = res.data;
					if (this.activityInfo.storeName) {
						this.activtiyStoreList = this.activityInfo.storeName.split(',');
					}
					this.activityGoodsList = this.activityInfo.activityGoodsList;
					if (this.activityGoodsList.length > 0) {
						this.activityGoodsList.forEach(item => {
							if (item.inventoryStatus == 1 && item.upperLimit > 0) {
								item.receiveStatus = 1; //领取状态:可领取
							} else {
								item.receiveStatus = 2; //领取状态:不可领取
							}
						})
						//获取所有的优惠券中是否存在可领取的优惠券
						var index = this.activityGoodsList.findIndex(item => item.receiveStatus === 1); //=-1不存可领取的
						if (index == -1) { //没有可领取的优惠券
							this.allReceiveStatus = 2;
						} else {
							this.allReceiveStatus = 1;
						}

					}
				})
			},
			// 获取优惠券
			getCoupon(item) {

				if (this.allReceiveStatus == 2) {
					return
				}

				if (this.$store.state.user.isLogin) {
					receiveActivityCoupons({
						tenantId: this.$store.state.user.tenantId,
						activityId: this.activityId,
						couponId: item.couponId
					}).then(res => {
						this.$u.toast("领取成功");
						this.getActivityInfo();
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}

			}
		}
	}
</script>

<style lang="scss">
	page {
		background: linear-gradient(0deg, #eb222a 0%, #fc3d44 100%);
	}

	.acivityBg {
		width: 100%;
		height: 100vh;
		background-image: url('https://qykh.shopec.com.cn/image-server/dz/tongyongBg.png');
		background-size: 100% 100%;
		background-color: #fc3d44;
	}

	.title {
		padding: 110rpx 150rpx 0;
		color: #fff;
		font-size: 80rpx;
		text-align: center;
		font-weight: bold;
		letter-spacing: 8rpx;
		font-style: italic;
		color: #FFFFFF;
		text-shadow: 6px 3px red;
		min-height: 220rpx;
	}

	.content {
		background-color: #DF282E;
		margin: 400rpx 46rpx 0;
		border-radius: 20rpx;
		padding: 30rpx;
		padding-top: 50rpx;
		color: #fff;
		font-size: 26rpx;
		letter-spacing: 2rpx;
		line-height: 2em;
		padding-bottom: 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.content_title {
			width: 280rpx;
			height: 70rpx;
			line-height: 70rpx;
			background: #df282e;
			border: 2rpx solid #ffffff;
			border-radius: 35rpx;
			color: #FFFFFF;
			font-size: 26rpx;
			font-weight: bold;
			text-align: center;
			position: relative;
			top: -80rpx;
		}

		.content_info {
			margin-top: -60rpx;
		}


	}

	.couponBg {
		// background: linear-gradient(to bottom, #FF4E55 ,transparent);
		margin: 20rpx 46rpx 0;
		border-radius: 20rpx;
		padding: 20rpx;

		.couponItem {
			width: 98%;
			height: 190rpx;
			background-image: url('https://qykh.shopec.com.cn/image-server/dz/couponBg.png');
			background-size: 100% 100%;
			display: flex;
			align-items: center;

			&.unUseCoupon {
				background-image: url('https://qykh.shopec.com.cn/image-server/dz/couponBig_disable.png');
			}

			.left {
				width: 33%;
				text-align: center;
				color: #ca151b;
				font-size: 24rpx;

				.amount {
					font-size: 50rpx;
					font-weight: bold;

					&::after {
						content: '折';
						font-size: 24rpx;
					}
				}

				.amount1 {
					font-size: 50rpx;
					font-weight: bold;

					&::before {
						content: '¥';
						font-size: 24rpx;
					}
				}
			}

			.center {
				color: #333;
				font-size: 24rpx;
				width: 33%;

				view:nth-child(1) {
					font-size: 28rpx;
					margin-bottom: 10rpx;

				}
			}

			.right {
				text-align: center;
				width: 34%;
				display: flex;
				justify-content: center;

				.btn {
					width: 180rpx;
					height: 56rpx;
					line-height: 56rpx;
					background: linear-gradient(#eb222a 0%, #ff5266 100%);
					border-radius: 28rpx;
					color: #fff;
					font-size: 24rpx;

					&.active {
						background: linear-gradient(#808080 0%, #868686 100%);
					}
				}
			}
		}
	}

	.listBg {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;

		.couponItem1 {
			width: 48%;
			height: 190rpx;
			background-image: url('https://qykh.shopec.com.cn/image-server/dz/coupon_bg2.png');
			background-size: 100% 100%;
			display: flex;
			align-items: center;
			margin-bottom: 10rpx;
			margin-right: 10rpx;

			&.unUseCoupon1 {
				background-image: url('https://qykh.shopec.com.cn/image-server/dz/couponSmall_disable.png');
			}

			.left {
				width: 50%;
				text-align: center;
				color: #ca151b;
				font-size: 24rpx;

				.amount {
					font-size: 50rpx;
					font-weight: bold;

					&::after {
						content: '折';
						font-size: 24rpx;
					}
				}

				.amount1 {
					font-size: 50rpx;
					font-weight: bold;

					&::before {
						content: '¥';
						font-size: 24rpx;
					}
				}
			}

			.right {
				color: #333;
				font-size: 22rpx;
				width: 50%;
				display: flex;
				flex-direction: column;
				align-items: center;

				view:nth-child(1) {
					font-size: 22rpx;
					margin-bottom: 10rpx;

				}
			}
		}
	}

	.oneClickRecive {
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		background: linear-gradient(#ffeed4 0%, #ffe5c7 100%);
		border-radius: 49rpx;
		margin: 32rpx 75rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #ff500b;

		&.active {
			color: #fff;
			background: linear-gradient(to left, #808080 0%, #868686 100%);
		}
	}


	.store-content {
		margin: 0 46rpx;
		padding: 30rpx 0;
		background-color: #DF282E;
		border-radius: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.info {
			display: flex;
			flex-direction: column;

			.time {
				color: #fff;
				font-size: 28rpx;
				font-weight: bold;
			}

			.storeInfo {
				display: flex;
				justify-content: center;

				.storeTitle {
					color: #fff;
					font-size: 30rpx;
					font-weight: bold;
				}

				.storeBox {
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					color: #fff;
					font-size: 30rpx;
					font-weight: bold;
				}
			}
		}
	}
</style>
